<?php
@ob_start();
@session_start();
error_reporting (E_ALL ^ E_NOTICE);	

require_once("../../includes/GPSFunction.php");
require("../user/checkSession.php");
require("../../includes/config.inc.php"); 
require("../../includes/Database.class.php"); 

include("../user/Util.php"); 
$util =  new Util();

$db = new Database(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE); 
$db->connect(); 

$getUserInfo = "SELECT * FROM tb_userinfo,tb_clientinfo WHERE ui_id  = ".$_SESSION[userID]." AND ci_id = ".$_SESSION[clientID];
$resUserInfo = $db->query($getUserInfo);
if($db->affected_rows > 0)
{
	$recordUserInfo = $db->fetch_array($resUserInfo);
	
	if($recordUserInfo[ci_clientId]!=0)
	{
		$getResellInfo = "SELECT ci_clientName,ci_clientLogo,ci_footerText FROM tb_clientinfo WHERE ci_id = ".$recordUserInfo[ci_clientId];
		$resResellInfo = $db->query($getResellInfo);
		if($db->affected_rows > 0){
			$fetResellInfo = $db->fetch_array($resResellInfo);
			$clientLogo = $fetResellInfo[ci_clientLogo];
			$clientOrgName = $fetResellInfo[ci_clientName];
			$clientFooter = $fetResellInfo[ci_footerText];
		}
		else
		{
			$clientOrgName = $recordUserInfo[ci_clientName];
			$clientLogo = $recordUserInfo[ci_clientLogo];
			$clientFooter = $recordUserInfo[ci_footerText];
		}
	}
	else
	{
		$clientOrgName = $recordUserInfo[ci_clientName];
		$clientLogo = $recordUserInfo[ci_clientLogo];
		$clientFooter = $recordUserInfo[ci_footerText];
	}
	$welcomeTxt = '';
	if($recordUserInfo[ui_isAdmin] == 1)
	{
		$welcomeTxt = 'Admin';
	}
	elseif($recordUserInfo[ui_roleId])
	{
		
		$welcomeTxt = $util->getRoleNameOfUserByRoleId($recordUserInfo[ui_roleId]);
	}
	if($recordUserInfo[ci_clientType] == "Reseller")
	{
		$getDevice = "SELECT ci_id,ci_clientName FROM tb_deviceinfo,tb_clientinfo,tb_client_subscription WHERE tcs_deviceId = di_id AND di_status = 1 AND tcs_isActive = 1 AND di_clientId = ci_id AND ci_clientId=".$_SESSION[clientID]." group by ci_clientName";
	
		$resDevice= $db->query($getDevice);	
		if($db->affected_rows > 0)
		{
			$option = '';
			while ($fetDevice = $db->fetch_array($resDevice)) 
			{
				$renewDate = date("d-m-Y",strtotime("-1 days ".($fetDevice[tcs_noOfMonths]) ."months ".$fetDevice[tcs_renewalDateFrom]));
				if(strtotime($date_offline) <= strtotime($renewDate))
				{
					$option .= '<option value="'.$fetDevice[ci_id].'#'.$fetDevice[ci_clientName].'">'.$fetDevice[ci_clientName].'</option>';
				}
			}
			//echo $option;
		}
	}
}

if(isset($_POST[date_offline]) && $_POST[date_offline])
	$date_offline = $_POST[date_offline];
else
	$date_offline = date('d-m-Y');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $clientOrgName;?> :: GPS Application</title>
<link href="../../../../images/fav-icon.gif" rel="icon" />

<link href="../../../../css/style.css" rel="stylesheet" type="text/css" />
<link href="../../css/mapCss.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="all">@import "../../css/timePicker.css";</style>
<link rel="stylesheet" href="../../../../css/themes/base/jquery.ui.all.css">
<link type="text/css" href="../../css/themes/default/jx.stylesheet.css" rel="stylesheet" />

<script language="javascript" src="../../javascript/ajax.js"></script>

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=<?php echo GOOGLE_API_KEY;?>" type="text/javascript"></script>
<script type="text/javascript">
      document.write('<script type="text/javascript" src="js/markerclusterer' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
    </script>
<script src="../../javascript/elabel.js" type="text/javascript"></script>
<!--<script src="javascript/mapiconmaker.js" type="text/javascript"></script>
<script src="javascript/BdccArrowedPolyline.js" type="text/javascript"></script>
-->
<script src="../../../../js/jquery-1.4.2.js"></script>
<script src="../../../../js/ui/jquery.ui.core.js"></script>
<script src="../../../../js/ui/jquery.ui.widget.js"></script>
<script src="../../../../js/ui/jquery.ui.datepicker.js"></script>

<script type="text/javascript" src="../../js/timePicker.js"></script>
<script src="../../js/tabslide.js" type="text/javascript"></script>

<script src="../../javascript/maps_off.js" type="text/javascript"></script>
<script src="../../javascript/MapScript.js" type="text/javascript"></script>

<script type="text/javascript" src="../../js/jquery.speedometer.js"></script>
<script type="text/javascript" src="../../js/excanvas.js"></script>


<link href="../../gauage/styles/fuel.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../../gauage/js/raphael.js"></script>
<script type="text/javascript" src="../../gauage/js/gauge.js"></script>
<script type="text/javascript" src="../../gauage/js/fuel.js"></script>
<!--
<script type="text/javascript" src="gauage/js/timers.js"></script>
<link href="gauage/styles/speedometer.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="gauage/styles/temp.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="gauage/js/fuel.js"></script>
<script type="text/javascript" src="gauage/js/speedometer.js"></script>
<script type="text/javascript" src="gauage/js/temp.js"></script>
-->
<link rel="stylesheet" type="text/css" href="../../css/jqpopup.css"/>

</head>

<body  onLoad="load('<?php echo date("d-m-Y");?>','<?php echo $_SESSION[clientID];?>')" onUnload="GUnload()">
<form name="frmMapData" id="frmMapData">
<div class="wrapper"><!-- wrapper div START here -->
	<div class="headerarea"><!-- Headerarea div START here -->
    	<!-- toparea div END here -->
        <table border="0" cellpadding="3" cellspacing="3">
         <tr>
         	<td width="10%">
            	<a href=""><img src="../client_logo/<?php echo $clientLogo;?>" width="175" height="55" /></a>
            </td>            
           <td width="40%">
           		<table class="param_grid_final">
                	<tr height="30">
	                    <th width="15%">Device Name</th><td width="20%" id="devNameID">N/A</td>
                        <th>Date & Time</th><td  colspan="3" width="20%" id="dateTime">N/A </td>    
                        <!--<th width="15%">Satelite</th><td id="noSate">N/A </td>                        -->
                    </tr>
                    <tr>
                    	<th width="15%" >Latitude</th><td width="20%" id="posLatPt">N/A</td>
                        <th width="15%" >Longitude</th><td width="20%" id="posLongPt">N/A</td>
                        <th width="15%" >Altitude</th><td width="20%" id="posAltPt">N/A</td>                        
                    </tr>
                </table>
           </td>
           <td width="20%">
            <div id="mapmenu">
            	<ul class="menu4">
                    <li><a href="#" id="open_btn" rel="dropmenu1">Device List</a></li>  
                    <li><a href="#" id="open_btn1" rel="dropmenu2">Track</a></li>
                </ul>
            </div>
            <div id="sampleformdiv" class="hidePopDiv" title="1st jQpopup box">
            	<table class="detailsGrid">
            	<tr>
                	<td>&nbsp;</td>
                    <td class="closeImg"><img src="../../images/close.gif" onclick="closePopDiv('sampleformdiv')" border="0" align="Close" title="Close" /></a>
                  </tr>
                  <tr>
                  <td colspan="2">
	              <div id="mapTable" style="width:auto;">Loading...</div>
                  </td>
                  </tr>
                  </table>
           </div>
            <div id="sampleformdiv1" class="hidePopDiv" title="2nd jQpopup box"> 
              <table class="detailsGrid">
              	  <tr>
                    <td width="20%">&nbsp;</td>
                    <td class="closeImg"><img src="../../images/close.gif" onclick="closePopDiv('sampleformdiv1')" border="0" align="Close" title="Close" /></a>
                  </tr>
                  <tr>
                    <td><strong>Start Date</strong></td>
                    <td width="50%"><strong>Time</strong></td>
                  </tr>
                  <tr>
                    <td align="left"><input type="text" name="from_date" id="from_date" size="8%" value="<?php echo $date_offline;?>" /></td>
                    <td align="left"><span><input type="text" readonly="readonly" id="time3" size="7" value="00:01" /></span></td>
                  </tr>
                  <tr><td><strong>End Date</strong></td><td><strong> Time</strong></td></tr>
                  <tr><td align="left"><input type="text" name="to_date" id="to_date" size="8%" value="<?php echo $date_offline;?>" /></td>
                      <td align="left"><span><input type="text" id="time4" size="7" readonly="readonly" value="23:59" /></span></td>
                  </tr>
                  <tr>
                      <td>
                      <table style="border-bottom:0px;">
                        <tr>
                          <td><span>Start</span></td>
                          <td><img src="../../marker/icons/dd-start.png" width="16" height="18" border="0" alt="Start Point" /></td>
                          <td>End</td>                          
                          <td><img src="../../marker/icons/dd-end.png" width="16" height="18" border="0" alt="End Point"/></td> 
                      </table>
                      </td>
                      <td align="left"><input type="hidden" name="hidTxtDevId" id="hidTxtDevId" />
                    <input type="button" name="cmdFindData" id="cmdFindData" value="Find" disabled="disabled" onClick="showMapOnDate(document.getElementById('from_date').value,document.getElementById('time3').value,document.getElementById('to_date').value,document.getElementById('time4').value,document.getElementById('hidTxtDevId').value);" class="btnFindNACSS" />
                      </td>
                  </tr>          
                  <tr>                      
                  <td colspan="2">
                  <table width="auto">
                  <tr>
                    <td width="40%"><span>Speed = 0</span></td>
                    <td width="10%"> <img src="../../images/pp/pin30_red_dot.png" width="18" height="20" border="0" alt="speed 0" /> </td>                        
                    <td width="40%">Play/Pause</td>
                    <td width="10%"><img src="../../images/icons/d_play.png" id="cmdPlay" style="cursor:pointer;" width="22" height="22" border="0" alt="t_Play" onClick="playAnimation(this)" /></td>                        
                  </tr>
                  <tr>
                      <td><span>Speed < 60</span></td>
                      <td><img src="../../images/pp/pin30_blue_dot.png" width="18" height="20" border="0" alt="speed < 60" /></td>
                      <td>Stop</td>                          
                      <td><img src="../../images/icons/d_stop.png" id="cmdStop" style="cursor:pointer;" width="22" height="22" border="0" alt="t_Stop" onClick="stopAnimation(this)" /></td>                          
                  </tr>
                  <tr>
                      <td><span>Speed > 60</span></td>
                      <td><img src="../../images/pp/pin30_yellow.png" width="18" height="20" border="0" alt="speed > 60" /></td>
                      <td><span>Animate</span></td>
                      <td>
                      <select name="selBubbleInter" id="selBubbleInter" disabled="disabled" onChange="showBubbleInterval(this.value)">
                        <option value=1 selected=selected >1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option>
                      </select>
                      </td>          
                   </tr>
                   </table>
                   </td>
                  </tr>
                </table>
			   </div>
            </td>
            <td width="15%" id="refreshBlk" style="text-align:right; padding-right:10px;">
            <input type="button" name="showAll" class="showlive_off" id="showAll" value="Show Live" onClick="showMapForDate('<?php echo $date_offline;?>')" />
            <select name="selectRefresh" id="selectRefresh" disabled="disabled" tabindex="3" onChange="autoRefresh1();">
              <option value ="0">Refresh - Off</option>
              <option value ="10">Refresh - 10 secs</option>
              <option value ="20">Refresh - 20 secs</option>
              <option value ="30">Refresh - 30 secs</option>
              <option value ="40">Refresh - 40 secs</option>
              <option value ="50">Refresh - 50 secs</option>
              <option value ="60">Refresh - 1 minute</option>
           </select>
           </td>
           </tr>
        </table>
    </div><!-- headerarea div END here -->
    <span class="statusMsg" id="messages">Loading...</span>
    <?php if($recordUserInfo[ci_clientType] == "Reseller") { ?>
    <span class="map_place_area">
        <label>Choose Client</label>
        <select name="selClientId" id="selClientId" onchange="loadClientDevice(this.value);">
             <?php echo $option;?>
        </select>
    </span>
    <?php }?>
    
	<div align="center"><!-- pagearea div start here -->        
       
        <div class="tab_container">
            <div id="tab1" class="tab_content" style="z-index:9999;">
            <table width="100%" border="0">
            <tr>
                <td style="vertical-align:top;width:210px; background:#FFFFFF;">                
                 <table width="100%">
                <tr>
                	<th class="thHead">Parameters</th>
                </tr>
                <tr>
                <td>
                	<table class="param_grid_final" id="paramTable">
                    	<tr><td>Choose Device</td></tr>                    
	                </table>
                </td>
                </tr>
                <tr><td>
                   <div id="speedMeter"></div>
                <td></tr>
                </table>
                <ul id="menu1">
                <li id="analogBox1" style="display:none;">
                    <a href="#" id="head1">Fuel Meter</a>
                    <ul>
                        <li style="background-color:#FFF; padding:5px;">
                           <div id="fuel1">
                                <img src="../../images/needle2.png" alt="needle1"/>
                            </div>
                        </li>                        
                    </ul>
                </li>  
                <li id="analogBox2" style="display:none;">
                    <a href="#" id="head2">Fuel Meter</a>
                    <ul>
                        <li style="background-color:#FFF; padding:5px;">
                           <div id="fuel2">
                                <img src="../../images/needle2.png" alt="needle2"/>
                            </div>
                        </li>                        
                    </ul>
                </li>              
                <!--
                <li id="directionIMG" style="display:block;">
                    <a href="#">Direction</a>
                    <ul>
                        <li style="background:#FFF;">
                        <div style="background:transparent url('images/comprose_s.gif') center top no-repeat; height:155px;">
                        	<img id='binnacle' src='images/binnacle_s.png' style=" position:relative; top:19.5%; left:30%;" height="90">
						</div>
                        </li>                        
                    </ul>
                </li>
                -->
                </ul>
                </td>
                <td width="1%">&nbsp;</td>
                <td style="vertical-align:top">
                    <div id="map_canvas" style="width: 100%;">Loading...</div>
                </td>
             </tr>
             </table>
            </div>
            
            <div id="tab2" class="tab_content">
                <div id="reportView" align="center">
                <strong>Click find button to get report</strong></div>
            </div>                
        </div>
		
        <div class="panel_container" id="panel1">
            
      </div>

           
    </div><!-- CONTENT Panel Div END here -->
    </div><!-- Pagearea div end here -->
    
    <div class="footerarea" style="display:none;"><!-- footerarea div START here -->
    	<span class="left" id="messages">Loading...</span>
        <span class="right" style="text-align:right;"><!--<a href="#">Link one</a> | <a href="#">Link one</a> | <a href="#">Terms &amp; Conditions</a>--></span>
    </div><!-- Footerarea div END here -->
</div>
</form>
<canvas id="arrowcanvas" width="32" height="32"></canvas>
</body>
</html>
<script type="text/javascript">
//<![CDATA[
var myLayout; // a var is required because this page utilizes: myLayout.allowOverflow() method
var fuelGauge;
var activeTab;
$(document).ready(function () {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});
	
	$('#test').speedometer(0);
	
	//fuelGauge = new Fuel("fuel1");
	
	
   $("#open_btn").click(function () {
      $("#sampleformdiv").show();
   });
   $("#open_btn1").click(function () {
      $("#sampleformdiv1").show();
   });

	//fuelGauge.SetFuel(75);
});
function closePopDiv(div)
{
	$("#"+div).hide();
}
$(function() {
	$( "#from_date" ).datepicker({
		changeMonth: true,
		changeYear: true,
		maxDate: 0,
		showOn: "button",
		buttonImage: "images/calendar.gif",
		buttonImageOnly: true,
		dateFormat : "dd-mm-yy"
	});
});
$(function() {
	$( "#to_date" ).datepicker({
		changeMonth: true,
		changeYear: true,
		maxDate: 0,
		showOn: "button",
		buttonImage: "images/calendar.gif",
		buttonImageOnly: true,
		dateFormat : "dd-mm-yy"
	});
});
$(function() 
{
    // Use default settings
    //$("#time3, #time4").timePicker();
	 $("#time3, #time4").timePicker({
	  startTime: "00:01", // Using string. Can take string or Date object.
	  endTime: "23:59", // Using Date object here.
	  show24Hours: true,
	  separator: ':',
	  step: 1});    
        
    // Store time used by duration.
    var oldTime = $.timePicker("#time3").getTime();
    
    // Keep the duration between the two inputs.
    $("#time3").change(function() {
      if ($("#time4").val()) { // Only update when second input has a value.
        // Calculate duration.
        var duration = ($.timePicker("#time4").getTime() - oldTime);
        var time = $.timePicker("#time3").getTime();
        // Calculate and update the time in the second input.
        $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
        oldTime = time;
      }
    });
    // Validate.
    $("#time4").change(function() {
      if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
        $(this).addClass("error");
      }
      else {
        $(this).removeClass("error");
      }
    });
    
});
function loadClientDevice(clientID)
{
	$("#panel1 .panelHead").html("Loading...");
	val = clientID.split("#")
	clientId = val[0];
	clientName = val[1];
	document.getElementById('mapTable').innerHTML = "Getting list for ...<br />"+clientName;
	map.clearOverlays();
	tmpNdiv = '';
	$('td#ctSpd').text("N/A");
	$('td#dateTime').text("N/A");
	$('td#posLatPt').text("N/A");
	$('td#posLongPt').text("N/A");
	$('td#posAltPt').text("N/A");
	//$('td#noSate').text("N/A");
	$('td#Engine').text("N/A");
	$('td#AC').text("N/A");
	$('td#Ignition').text("N/A");
	$('td#Sos').text("N/A");
	$('#test').speedometer({ percentage: 0 });
	refreshMapTable("",clientId,"<?php echo $date_offline;?>");
	getAllVehicle("<?php echo $date_offline;?>",clientId);
	$("#panel1 .panelHead").html("Device List - "+clientName);
}

if($("#selClientId").find("option:selected").text())
	$("#panel1 .panelHead").html("Device List - "+$("#selClientId").find("option:selected").text());	
else
	$("#panel1 .panelHead").html("Device List - <?php echo $clientOrgName;?>");	
refreshMapTable("","<?php echo $_SESSION[clientID];?>","<?php echo $date_offline;?>");
function showMapForDate(val)
{	
	document.getElementById('mapTable').innerHTML = "Loading...";
	document.getElementById('showAll').className = 'showlive_off';
	hasMap();
	autoRefresh = 0;
	clearInterval(intervalID);
	pickThisDevice(0);
	document.frmMapData.cmdPlay.value = "Play";
	document.frmMapData.cmdPlay.disabled = true;
	//document.frmMapData.chkShowBubble.disabled = true;
	document.frmMapData.selBubbleInter.selectedIndex = 2
	document.frmMapData.selBubbleInter.disabled = true;
	if(route) clearTimeout(route);
	 stopClick = false;
	 count = 0;	
	 myMarker = "";
	//document.getElementById('map').innerHTML = "Loading...";
	getAllVehicle(val,'<?php echo $_SESSION[clientID];?>');
	refreshMapTable("","<?php echo $_SESSION[clientID];?>",val);	
}
//]]>
</script>
